<template>
  <view class="index">
    <muscihead title="猪哥音乐" :icon="false"></muscihead>
    <view>
      <scroll-view scroll-y="true" class="container">
        <view class="login">
          <view class="touxiang">
            <u-avatar
              :src="values.avatarUrl"
              v-show="show"
              @click="this.show = true"
            ></u-avatar>
            <u-popup :show="show" mode="left" @close="close" @open="open">
              <view style="margin-top: 100rpx">
                <text> 个人中心 个人中心 个人中心 </text>
                <view style="margin-top: 100rpx"
                  ><text> 你的等级为:{{ level }}级 </text></view
                >
                <view style="margin-top: 100rpx">
                  <u-button
                    type="primary"
                    icon="map"
                    text="喜欢的歌"
                  ></u-button>
                </view>
                <view style="margin-top: 100rpx">
                  <u-button
                    type="primary"
                    icon="map"
                    text="听歌记录"
                  ></u-button>
                </view>
                <view style="margin-top: 100rpx">
                  <u-button
                    type="primary"
                    icon="map"
                    text="我的歌单"
                  ></u-button>
                </view>
              </view>
            </u-popup>
            <view>
              {{ values.nickname }}
            </view>
          </view>
          <view class="button" v-show="deng">
            <u-button
              class="buttons"
              type="primary"
              shape="circle"
              text="点我登录"
              @click="gotologin(), dengs()"
            ></u-button>
          </view>
          <view class="button" v-show="zhu">
            <u-button
              class="buttons"
              type="primary"
              shape="circle"
              text="点我注销"
              @click="logout(), dengs()"
            ></u-button>
          </view>
        </view>
        <view class="search" @click="serch()">
          <text class="iconfont icon-fangdajing"></text>
          <input type="text" placeholder="搜索歌名" />
        </view>
        <view class="lunbo">
          <u-swiper
            :list="list3"
            previousMargin="30"
            keyName="pic"
            nextMargin="60"
            circular
            height="150"
            :autoplay="true"
            radius="5"
            :loading="loading"
            bgColor="#ffffff"
          >
          </u-swiper>
        </view>
        <view class="list">
          <view
            @click="handjump(item.id)"
            class="list-item"
            v-for="item in topLists"
            :key="item.id"
          >
            <view class="image">
              <image :src="item.coverImgUrl"></image>
              <text>{{ item.updateFrequency }}</text>
            </view>
            <view class="no123">
              <view v-for="(items, index) in item.tracks" :key="index"
                >{{ index + 1 }}.{{ items.first }} - {{ items.second }}</view
              >
            </view>
          </view>
          <!-- <view>
            <view class="mvsp">
              <text>推荐MV</text>
            </view>
            <view
              class="list-item"
              v-for="(item,index) in mvList"
              :key="index"
              @click="gotoMvsp(item.id)"
            >
              <view class="image">
                <image :src="item.cover"></image>
              </view>
              <view class="no123">
                <view>
                  {{item.name}}
                </view>
               作者- {{item.artistName}}
              </view>
            </view>
          </view> -->
        </view>
      </scroll-view>
    </view>
  </view>
</template>

<script>
import "@/common/iconfont.css";
import muscihead from "../../components/musichead/musichead";
// import { topList } from "../../common/api";
import { baseUrl } from "../../common/config";
export default {
  components: {
    muscihead,
  },
  data() {
    return {
      topLists: [],
      list3: [],
      loading: true,
      mvList: [],
      appInst: {},
      values: {},
      deng: true,
      zhu: false,
      show: false,
      valuess: {},
      level: "",
    };
  },
  onLoad() {
    this.appInst = getApp().globalData.userInfo;
    console.log(this.appInst);
    this.topList();
    this.getlunbo();
    this.value = uni.getStorageSync("user");
    this.values = JSON.parse(this.value);
    this.valuess = uni.getStorageSync("cookie");
    console.log("cookie", this.valuess);
    // console.log(this.value);
    // console.log(this.values);

    this.getsubcount();
    this.getlevel();
    this.getbinding();
    // this.getMv();
  },
  methods: {
    open() {
      // console.log('open');
    },
    close() {
      this.show = false;
      // console.log('close');
    },
    //退出登录
    logout() {
      uni.request({
        url: `${baseUrl}/logout`,
        success: (res) => {
          console.log("注销成功", res.data);
        },
      });
      uni.removeStorageSync("user");
      this.values = null;
      console.log(this.values);
    },
    //注销登录切换
    dengs() {
      if (this.values !== null) {
        (this.deng = !this.deng), (this.zhu = !this.zhu);
      }
    },
    //获取账号信息
    getaccount() {
      uni.request({
        url: `${baseUrl}/user/account?cookie=${this.valuess}`,

        success: (res) => {
          console.log(res.data);
        },
      });
    },
    //获取用户信息 , 歌单，收藏，mv, dj 数量
    getsubcount() {
      uni.request({
        url: `${baseUrl}/user/subcount?cookie=${this.valuess}`,
        success: (res) => {
          console.log("获取用户信息 , 歌单，收藏，mv, dj 数量", res.data);
        },
      });
    },
    //获取用户等级信息
    getlevel() {
      uni.request({
        url: `${baseUrl}/user/level?cookie=${this.valuess}`, //仅为示例，并非真实接口地址。
        success: (res) => {
          console.log("获取用户等级信息", res.data);
          this.level = res.data.data.level;
          // console.log(res.data.data.level);
          console.log(this.level);
        },
      });
    },
    //获取用户绑定信息
    getbinding() {
      uni.request({
        url: `${baseUrl}/user/binding?uid=${this.values.userId}&cookie=${this.valuess}`,
        success: (res) => {
          console.log("获取用户绑定信息", res.data);
        },
      });
    },
    handjump(id) {
      uni.navigateTo({
        url: `/pages/list/list?id=${id}`,
      });
    },
    topList() {
      uni.request({
        url: `${baseUrl}/toplist/detail`,
        data: {},
        header: {},
        success: (res) => {
          // console.log(res.data);
          // let rdd=res.data.list
          // console.log(rdd);
          this.topLists = res.data.list;
          this.topLists.length = 4;
          // console.log(this.topLists);
        },
      });
    },
    getlunbo() {
      uni.request({
        url: `${baseUrl}/banner?type=1`,

        success: (res) => {
          // console.log(res.data);
          // this.pic=res.data.banners
          // console.log(this.pic);
          this.list3 = res.data.banners;
          // console.log(this.list3);
          this.loading = false;
        },
      });
    },
    serch() {
      uni.navigateTo({
        url: "/pages/sousuo/sousuo",
      });
    },
    getMv() {
      uni.request({
        url: `${baseUrl}/top/mv?limit=5`,
        success: (res) => {
          console.log(res.data);
          this.mvList = res.data.data;
          // console.log(this.mvList);
        },
      });
    },
    gotoMvsp(id) {
      uni.navigateTo({
        url: "/pages/mvsp/mvsp?id=" + id,
      });
    },
    gotologin() {
      uni.navigateTo({
        url: "/pages/login/login",
      });
    },
  },
};
</script>

<style lang="scss" scoped>
.login {
  display: flex;
  justify-content: space-between;
  .touxiang {
    margin-top: 30rpx;
    display: flex;
    align-items: center;
  }
  .button {
    width: 200rpx;
    margin-top: 30rpx;
    // margin-left: 520rpx;
  }
}

.mvsp {
  margin-bottom: 30rpx;
}
.search {
  display: flex;
  align-items: center;
  margin: 30rpx 30rpx 30rpx 30rpx;
  height: 100rpx;
  background-color: #f7f7f7;
  border-radius: 100rpx;

  text {
    margin-left: 20rpx;
    font-size: 40rpx;
  }

  input {
    margin-left: 20rpx;
  }
}

.lunbo {
  margin-bottom: 30rpx;
}
.list {
  margin: 0 30rpx;

  .list-item {
    display: flex;
    margin-bottom: 30rpx;

    .image {
      width: 200rpx;
      height: 200rpx;
      position: relative;
      border-radius: 30rpx;
      overflow: hidden;
      margin-right: 20rpx;

      image {
        width: 100%;
        height: 100%;
      }

      text {
        position: absolute;
        left: 12rpx;
        bottom: 16rpx;
        color: white;
        font-size: 16rpx;
      }
    }

    .no123 {
      font-size: 20rpx;
      line-height: 70rpx;
    }
  }
}
</style>
